<template>
	<view class="container">
		<u-navbar :border-bottom='false' back-icon-size='48' :title="stationInfo.gas_name"></u-navbar>
		<view class="station-item">
			<image :src="stationInfo.gas_logo_big" class="image"></image>
			<view class="info">
				<view class="title">{{stationInfo.gas_name}}</view>
				<view class="address">{{stationInfo.gas_address}}</view>
				<view class="detail">
					<view class="price">￥{{stationInfo.price_yfq}}</view>
					<view class="youhui">
						<image class="icon" src="../../../../static/imgs/youhui.png"></image>
						<view class="youhui-price">直降{{(stationInfo.price_official-stationInfo.price_yfq).toFixed(2)}}
						</view>
					</view>
					<view class="huaxian">国际价 ¥{{stationInfo.price_official}}</view>
				</view>
			</view>
			<view class="to">
				<view class="btn"
					@click.stop="toMap(stationInfo.gas_address_latitude,stationInfo.gas_address_longitude,stationInfo.gas_name)">
					导航</view>
				<text>{{stationInfo.distance}}km</text>
			</view>
		</view>
		<view class="fill-tab-select">

			<view class="title">
				油号
			</view>
			<view class="title-item">
				<view class="tab-select-item" :class="{active:oilhao==oilx}"
					v-for="(oil,oilx) in stationInfo.oil_price_list" :key='oilx' @click="choseoil(oilx)">{{oil.oilName}}
				</view>
			</view>
			<view class="title">
				油枪号
			</view>
			<view class="title-item">
				<view v-for="(oil,oilx) in stationInfo.oil_price_list" :key='oilx' v-if="oilhao == oilx">
					<view class="tab-select-item" :class="{active:oilNum == qiangx}"
						v-for="(qiang,qiangx) in oil.gunNos" :key='qiangx' @click="choseNum(qiang,qiangx)">
						{{qiang.gunNo}}
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-btn" @click="next">下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stationInfo: {},
				oilhao: 0,
				oilNum: 0,
				gas_id: '', // 油站id
				gun_no: '' // 枪号
			};
		},
		onLoad() {
			this.stationInfo = uni.getStorageSync('detail')
			this.gas_id = this.stationInfo.gas_id
			if (this.oilhao == 0) {
				this.gun_no = this.stationInfo.oil_price_list[this.oilhao].gunNos[this.oilhao].gunNo
			}
			uni.setNavigationBarTitle({
				title: this.stationInfo.gas_name
			})
		},
		methods: {
			toMap(latitude, longitude, name) {
				let url = "";
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "百度地图"
						}, {
							title: "高德地图"
						}],
					}, function(e) {
						switch (e.index) {
							case 1:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 2:
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("未安装应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 2:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("未安装应用");
							});
						}
					})
				}
			},

			next() {
				let {
					gas_id,
					gun_no
				} = this
				if (!gas_id || !gun_no) {
					uni.showToast({
						title: '请选择对应油号或枪号',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '../pay/pay?gun_no=' + gun_no + '&gas_id=' + gas_id
				})
			},
			choseoil(val) {
				this.oilhao = val
				this.gun_no = this.stationInfo.oil_price_list[val].gunNos[0].gunNo
			},
			choseNum(val, index) {
				this.oilNum = index
				this.gun_no = val.gunNo
				
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 20rpx;

		.station-item {
			border-radius: 20rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			margin: 40rpx 0;

			.image {
				width: 100rpx;
				height: 100rpx;
			}

			.info {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				flex-direction: column;
				width: 420rpx;


				.title {
					color: #333333;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.address {
					color: #999999;
					font-weight: 400;
					margin-bottom: 10rpx;
				}

				.detail {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: #333333;
						font-weight: bold;
					}

					.youhui {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #005EFF;
						font-size: 24rpx;
						margin-left: 10rpx;

						.icon {
							width: 36rpx;
							height: 36rpx;
						}

						.youhui-price {
							padding: 0 4rpx;
							height: 36rpx;
							border: 2rpx solid #005EFF;
						}
					}

					.huaxian {
						color: #9f9f9f;
						font-size: 26rpx;
						margin-left: 10rpx;
					}
				}
			}

			.to {
				color: #666666;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.btn {
					padding: 10rpx 30rpx;
					background: linear-gradient(180deg, #218BFF 0%, #3064FC 100%);
					color: #FFFFFF;
					border-radius: 40rpx;
					text-align: center;
					margin-bottom: 20rpx;
				}
			}
		}

		.fill-tab-select {
			display: flex;
			// align-items: center;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding-bottom: 20rpx;

			.title {
				padding: 20rpx 30rpx;
				font-weight: bold;
				color: #333333;
				text-align: left;
				width: 100%;
				margin-top: 20rpx;
			}

			.title-item {
				display: flex;
				// align-items: center;
				// justify-content: space-around;
				flex-wrap: wrap;

				.tab-select-item {
					width: 150rpx;
					padding: 10rpx;
					display: flex;
					justify-content: center;
					background-color: #F2F2F2;
					border-radius: 10rpx;
					color: #666666;
					margin: 10rpx;

					&.active {
						color: #FFFFFF;
						background: linear-gradient(180deg, #218BFF 0%, #3064FC 100%);
					}
				}
			}
		}

		.fixed-btn {
			width: 95%;
			border-radius: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: bold;
			background: linear-gradient(180deg, #218BFF 0%, #3064FC 100%);
			text-align: center;
			color: #FFFFFF;
			position: fixed;
			bottom: 60rpx;
			left: 2.5%;
		}
	}
</style>
